<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>build page</title>

    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>

<div id="app">
    <el-button type="primary" @click="saveBuild">添加</el-button>

    <el-dialog
            v-model="dialogVisible"
            title="添加build数据"
            width="500"
            @close="handleClose">

        <el-form :model="build" label-width="auto"
                 ref="ruleFormRef"
                 :rules="rules"
                 style="max-width: 600px">
            <el-form-item label="编号" prop="id">
                <el-input v-model="build.id" />
            </el-form-item>

            <el-form-item label="楼栋号" prop="numbers">
                <el-input v-model="build.numbers" />
            </el-form-item>

            <el-form-item label="单元" prop="units">
                <el-input v-model="build.units" />
            </el-form-item>

            <el-form-item label="备注" prop="remarks">
                <el-input v-model="build.remarks" />
            </el-form-item>

        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitBuild">
                    提交数据
                </el-button>
            </div>
        </template>
    </el-dialog>

</div>

<script>

    const { createApp,ref,onMounted,reactive } = Vue

    //添加引入 消息 message
    const { ElMessage, ElMessageBox } = ElementPlus

    const app = createApp({
        setup(){
            //表单对象
            const ruleFormRef = ref({})
            let build = ref({
                id:"",
                numbers:"",
                units:"",
                remarks:""
            })

            //添加按钮是否展示 默认是false
            let dialogVisible =ref(false);

            //定义 校验规则
            const rules = reactive({
                id: [
                    {
                        required: true,
                        message: 'Please input 房屋编号',
                        trigger: 'blur',
                    },{
                        pattern: /^\d+$/,
                        message: '房屋编号必须为纯数字',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        max: 8,
                        message: '房屋编号必须为 8 位数字',
                        trigger: 'blur'
                    }
                ],
                numbers: [
                    {
                        required: true,
                        message: 'Please input 房屋编号',
                        trigger: 'blur',
                        // 强制将空字符串转为 undefined，触发 required 校验
                        transform: (value) => value?.trim() || undefined
                    }
                ],
                units: [
                    {
                        required: true,
                        message: '请输入单元',
                        trigger: 'blur',
                        // 强制将空字符串转为 undefined，触发 required 校验
                        transform: (value) => value?.trim() || undefined
                    }
                ],
                remarks: [
                    {
                        required: true,
                        message: '请输入备注',
                        trigger: 'blur',
                        // 强制将空字符串转为 undefined，触发 required 校验
                        transform: (value) => value?.trim() || undefined
                    }
                ]
            })


            //添加
            function saveBuild(){
                //展示
                dialogVisible.value = true
            }

            //handleClose 关闭 dialog 之前需要做的事情
            function handleClose(){
                console.log("函数执行了。。。handleClose")
                //这里进行清空
                build.value = {
                    id:"",
                    numbers:"",
                    units:"",
                    remarks:""
                }
            }

            //批量删除

            //发送添加数据到服务器
            let submitBuild = async () => {
                await ruleFormRef.value.validate((valid, fields) => {
                    if (valid) {
                        console.log('submit!')
                    } else {
                        console.log('error submit!', fields)
                    }
                })
            }

            return {
                build,dialogVisible,
                saveBuild,submitBuild,handleClose,ruleFormRef,rules
            }
        }
    });
    app.use(ElementPlus)

    //解决图标问题
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }

    app.mount('#app')

</script>
</body>
</html>